<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>我的支付记录</p>
    </header>
    <!-- 订单列表部分 -->
    <div class="w">
      <div class="w-line"></div>
      <p>订单信息</p>
      <div class="w-line"></div>
    </div>
    <ul class="list">

      <li>
        <p>编号</p>
      </li>
      <!-- <li>
        <p>日期</p>
      </li> -->
      <li>
        <p>出账</p>
      </li>
      <li>
        <p>入账</p>
      </li>

      <li>
        <p>金额</p>
      </li>
      <li>
        <p>类型</p>
      </li>
    </ul>
    <ul class="lis">
      <li v-for="item in paymentList">
        <div class="order-info">
          <li>
            {{item.transactionId}}
          </li>
          <!-- <li> {{item.time}} </li> -->
          <li>
            {{item.outId}}
          </li>
          <li>
            {{item.toId}}
          </li>

          <li>
            {{item.money}}
          </li>
          <li>
            {{item.type}}
          </li>
        </div>
      </li>
    </ul>

    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>





<script>
import Footer from '../components/Footer.vue';

export default {
  name: 'OrderList',
  data() {
    return {
      paymentList: [],
      user: {},
      virtualWallet: {}

    }
  },
  created() {
    this.user = this.$getSessionStorage('user');

    let url1 = `WalletController/getWalletByUserid/${this.user.userId}`;
    this.$axios.get(url1,{
      headers : {
        'token': sessionStorage.getItem('token')
      }
    }).then(response => {
      this.virtualWallet = response.data.result;
    }).catch(error => {
      console.error(error);
    });

    let url2 = `WalletTransactionController/listWalletTransByUserId/${this.user.userId}`;
    this.$axios.get(url2,{
      headers : {
        'token': sessionStorage.getItem('token')
      }
    }).then(response => {
      let result = response.data.result;
      this.paymentList = result;
    }).catch(error => {
      console.error(error);
    });
  },
  methods: {

  },

  components: {
    Footer
  }
}
</script>




<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
}

/**header部分**/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}

/********/
.wrapper .w {
  padding-top: 10vw;
  width: 100%;
  height: 18vw;

  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .w .w-line {
  width: 6vw;
  height: 0.2vw;
  background-color: #888;
}

.wrapper .w p {
  font-size: 4vw;
  margin: 0 8vw;
}

.wrapper .lis {

}

.wrapper .lis .order-info{
  width: 100%;
  weight: 48vw;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
}
.wrapper .lis .order-info li{

  width: 18%;
  height: 10vw;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
.wrapper .list {
  width: 100%;
  weight: 48vw;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
}

.wrapper .list li {
  width: 10%;
  height: 14vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>
